<script setup lang="ts">
import { ref, watch } from "vue";
import { useSystemStoreWithOut } from "@/store/modules/system";
import { storeToRefs } from "pinia";

const systemStore = useSystemStoreWithOut();
const { materialTypeList } = storeToRefs(systemStore);

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  tableHeight: {
    type: Number,
    default: 0
  }
});

const diyRow = {
  materialCode: "", // 物料编码
  materialSpecsId: "", // 物料规格id
  materialName: "", // 物料名称
  materialType: "", // 物料类型
  materialSpecs: "", // 物料规格
  unit: "", // 单位
  overReceiveFlag: 0, // 超领标志
  maxNum: 0, // 最大可出库数量
  num: 0, // 本次出库数量
  overReceiveNum: 0, // 超领数量
  overReceiveWarehouseCode: "" // 超额处置仓库
};

const tableData = ref([{ ...diyRow }]);
const curRow = ref({});
const tableRef = ref(null);

watch(
  () => props.list,
  (newVal: any) => {
    tableData.value = newVal;
  },
  { deep: true }
);

const handleRowClick = (row: any) => {
  curRow.value = row;
};
</script>

<template>
  <div>
    <el-table
      ref="tableRef"
      class="tableBox"
      :data="tableData"
      style="width: 100%"
      :height="tableHeight"
      @row-click="handleRowClick"
    >
      <el-table-column type="index" label="序号" min-width="100px" />
      <el-table-column
        prop="materialCode"
        label="物料编码"
        min-width="104px"
        show-overflow-tooltip
      />
      <el-table-column
        prop="materialName"
        label="物料名称"
        min-width="160px"
        show-overflow-tooltip
      />
      <el-table-column
        label="物料类型"
        prop="materialType"
        min-width="104px"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-text>{{
            materialTypeList.find(
              val => val.dictLabelValue == scope.row.materialType
            )?.dictLabelName
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column
        prop="materialSpecs"
        label="物料规格"
        min-width="160px"
        show-overflow-tooltip
      />
      <el-table-column
        prop="unit"
        label="单位"
        min-width="80px"
        show-overflow-tooltip
      />
      <el-table-column
        prop="instockNum"
        label="可用库存"
        min-width="104px"
        align="center"
      >
        <template #default="{ row }">
          <el-text>{{ row.instockNum || "-" }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="本次出库数量" min-width="152px">
        <template #default="scope">
          <el-text>{{ scope.row.num || 0 }}</el-text>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
